<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" th:href="@{../../lib/layui/css/layui.css}">
    <script charset="utf-8" th:src="@{../../lib/layui/layui.js}" type="text/javascript"></script>
    <!--    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>-->
    <script th:src="@{../../js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <style>
        .vintage{
            background: #EEE url() repeat;
            text-shadow: 5px -5px black, 4px -4px white;
            font-weight: bold;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text }
    </style>
</head>
<body>
<div>
    <h1 th:class="vintage">食堂楼宇后勤基础信息</h1>
</div>
<hr class="hr15"/>

<form class="layui-form" id="dbbiAddForm">
    <div class="layui-form-item">
        <label class="layui-form-label">校区</label>
        <div class="layui-input-inline">
            <input checked id="location1" name="location" title="雁塔" type="radio" value="雁塔"
                   style="border: 1px solid darkorange">
            <input id="location2" name="location" title="草堂" type="radio" value="草堂"
                   style="border: 1px solid darkorange">
            <input disabled name="location" title="备用" type="radio" value="备用">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="dineBuild" class="layui-form-label">食堂楼宇</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="dineBuild" name="dineBuild"
                   placeholder="请输入正确的食堂名称" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="area" class="layui-form-label">占地面积</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="area" lay-verify="L_area" name="area"
                   placeholder="输入面积请保留0~3位小数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="buildTime" class="layui-form-label">建设时间</label>
        <div class="layui-input-inline">
            <select id="buildTime" name="buildTime" style="border: 1px solid darkorange">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="useTime" class="layui-form-label">投用时间</label>
        <div class="layui-input-inline">
            <select id="useTime" name="useTime" style="border: 1px solid darkorange">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="buildStru" class="layui-form-label">房屋结构</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="buildStru" name="buildStru"
                   placeholder="请输入正确的房屋结构" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="roofArea" class="layui-form-label">屋面面积(㎡)</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="roofArea" lay-verify="L_roofArea" name="roofArea"
                   placeholder="输入面积请保留0~3位小数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="facadeMaterial" class="layui-form-label">外立面材质</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="facadeMaterial" name="facadeMaterial"
                   placeholder="请输入正确的外立面材质" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="seatNum" class="layui-form-label">座椅数(个)</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="seatNum" lay-verify="L_seatNum" name="seatNum"
                   placeholder="请输入座椅个数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="switchBoxNum" class="layui-form-label">配电箱(个)</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="switchBoxNum" lay-verify="L_switchBoxNum"
                   name="switchBoxNum"
                   placeholder="请输入住宿人数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="fireHydrantNum" class="layui-form-label">消防栓(个)</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="fireHydrantNum" lay-verify="L_fireHydrantNum"
                   name="fireHydrantNum"
                   placeholder="请输入消防栓数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="elevatorNum" class="layui-form-label">电梯(部)</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="elevatorNum" lay-verify="L_elevatorNum" name="elevatorNum"
                   placeholder="请输入电梯数" type="text" style="border: 1px solid darkorange">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="toiletNum" class="layui-form-label">卫生间(间)</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" id="toiletNum" lay-verify="L_toiletNum" name="toiletNum"
                       placeholder="请输入卫生间数" type="text" style="border: 1px solid darkorange">
            </div>

    </div>
    <hr class="hr15"/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="addOne" lay-submit="" type="submit">增加</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>
<script>
    $(function () {
        var buildTime = $("#buildTime");
        buildTime.empty();   // 清空内容
        var obj = '';
        $("#buildTime").append('<option selected="selected" readonly="true">--请选择年份--</option>');  // 默认值
        var years = new Date().getFullYear();
        var count = [];
        for (var i = 1970; i <= years; i++) {
            count[i - 1970] = i;
        }
        for (var j = 0; j < count.length; j++) {
            obj += "<option value='" + count[j] + "'>" + count[j] + "</option>";
        }
        $("#buildTime").append(obj);

        var useTime = $("#useTime");
        useTime.empty();   // 清空内容
        var obj = '';
        $("#useTime").append('<option selected="selected" readonly="true">--请选择年份--</option>');  // 默认值
        var years = new Date().getFullYear();
        var count = [];
        for (var i = 1970; i <= years; i++) {
            count[i - 1970] = i;
        }
        for (var j = 0; j < count.length; j++) {
            obj += "<option value='" + count[j] + "'>" + count[j] + "</option>";
        }
        $("#useTime").append(obj);
    });
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;

        var form = layui.form,
            layer = layui.layer;

        // 自定义验证
        form.verify({
            // L_id: [/(\d){12}/, '长度严格为12为，请仿照样例'],
            L_area: [/^(([1-9]\d*)|(0))(\.\d{0,3})?$/, '最多保留三位小数'],
            L_roofArea: [/^(([1-9]\d*)|(0))(\.\d{0,3})?$/, '最多请保留三位小数'],
            L_seatNum: [/^\d+$/, '请输入大于等于0的数字'],
            L_switchBoxNum: [/^\d+$/, '请输入大于等于0的数字'],
            L_fireHydrantNum: [/^\d+$/, '请输入大于等于0的数字'],
            L_elevatorNum: [/^\d+$/, '请输入大于等于0的数字'],
            L_toiletNum: [/^\d+$/, '请输入大于等于0的数字']
        });

        // 监听提交
        form.on('submit(addOne)',
            function () {
                $.ajax({
                    url: "/dbbi_eat/add",
                    data: $("#dbbiAddForm").serialize(),
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code === 0) {
                            var index = parent.layer.getFrameIndex(window.name);
                            layer.msg(data.msg, {icon: 1, time: 1000, shade: 0.4}, function () {
                                parent.layer.close(index);

                            });
                        } else {
                            var index = parent.layer.getFrameIndex(window.name);
                            layer.msg(data.msg, {icon: 2, time: 1000, shade: 0.4}, function () {
                                parent.layer.close(index);
                            });

                        }
                    }
                });
                return false;
            }
        );
    });
</script>
</body>